<template>
  <page-wrap :show-top="showTop" :bg-color="uNavColor">
    <view class="user-center">
      <view
        class="person-top"
        :style="'padding-top:' + navHeight + 'px;'"
      ></view>
      <view class="person-header" @click="toResume">
        <view class="avatar-wrap">
          <image
            class="avatar"
            mode="aspectFill"
            :src="userInfo.pic || defaultAvatar"
          ></image>
        </view>
        <view
          class="login-header"
          v-if="personId && userInfo && userInfo.personId"
        >
          <view class="name"
            >{{ userInfo.iname || userInfo.personId }}
            <image :src="flag" class="flag"></image>
          </view>
          <view class="renzheng"
            >认证平台优选顾问，在线接单
            <image
              :src="renzhengImage"
              class="renzhengImage"
              @click="handleCheckDetail"
            ></image>
          </view>
        </view>
        <view class="login-header need-login" v-else> 点击登录/注册 </view>
      </view>
      <view class="king-kong">
        <view class="one-new-remind" v-if="remindNumber > 0">{{
          remindContent
        }}</view>
        <view class="triangle" v-if="remindNumber > 0"></view>
        <view
          class="king-kong-item"
          v-for="(item, index) in kingKongList"
          :key="index"
          @click="handleRoute(item)"
        >
          <u-badge type="error" :offset="[-16, -8]" :count="item.cnt">
          </u-badge>
          <image class="icon" :src="item.icon" mode="widthFix"></image>
          <view>{{ item.name }}</view>
        </view>
      </view>
      <view class="list">
        <view
          class="list-item"
          v-for="(item, index) in optionList"
          :key="index"
          @click="handleRoute(item)"
        >
          <view class="list-item-left">
            <text :class="['item-icon', item.icon]"></text>
            {{ item.name }}
          </view>
          <view class="list-item-right">
            <text class="list-item_label">{{ item.label }}</text>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
      </view>
      <view
        v-if="personId && userInfo && userInfo.id"
        class="log-out"
        @click="handleLogOut"
      >
        退出登录
      </view>
    </view>

    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import ShareMixin from "@/mixins/share";
import loginOutMixin from "@/mixins/login-out.js";
import loginMixin from "@/mixins/login.js";
import LoginDialog from "@/components/LoginDialog";
import { isCompanyPersonOld, isCompanyPerson } from "@/api/index";
import { ztConsultantInfo } from "@/api/modules/career";
import { getConsultantNoticeCount } from "@/api/modules/orderManage.js";
export default {
  components: {
    LoginDialog,
  },
  mixins: [ShareMixin, loginOutMixin, loginMixin],
  data() {
    return {
      remindNumber: 0,
      remindContent: "有新订单",
      uNavColor: this.$uNavColor,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      isConsultant: getApp().globalData.userIsConsultant,
      userInfo: {},
      info: {},
      renzhengImage: this.$imgBase + "pcenter/renzheng.png",
      flag: this.$imgBase + "career/consultant.png",
      defaultAvatar: this.$imgBase + "common/avatar_default.png",
      rctypeList: {
        1: "社会人才",
        0: "学生",
      },
      isCompany: false,
      showTop: false,
      navHeight: getApp().globalData.navHeight + uni.upx2px(114),
      kingKongList: [
        {
          name: "个人资料",
          icon: this.$imgBase + "pcenter/icon1.png",
          url: "/pagesSub/career/consultant/consultantInfo/index",
          isTab: false,
          cnt: "",
        },
        {
          name: "订单管理",
          icon: this.$imgBase + "pcenter/wallet.png",
          // url: "/pagesSub/orderManage/index",
          url: "/pagesSub/orderManageBefore/index",
          isTab: false,
          cnt: "",
        },
        // {
        //   name: "服务项管理",
        //   icon: this.$imgBase + "pcenter/icon2.png",
        //   url: "/pagesSub/userCenter/serviceManage/index",
        //   isTab: false,
        //   cnt: "",
        // },
        {
          name: "服务营销页",
          icon: this.$imgBase + "pcenter/icon4_new.png",
          url: "/pagesSub/userCenter/consultantShare/index",
          isTab: false,
          cnt: "",
        },
      ],
      optionList: [
        {
          name: "服务记录",
          icon: "icon3",
          url: "/pagesSub/userCenter/serviceRecord/index",
        },
        // {
        //   name: "咨询记录",
        //   icon: "icon3",
        //   url: "/pagesSub/userCenter/consultRecord/index",
        // },
        {
          name: "我要求职",
          icon: "icon-job-wanted",
          url: "/pagesSub/public/character/index?active=person",
        },
        // {
        //   name: "我要招聘",
        //   icon: "icon3",
        //   url: "/pagesSub/public/character/index?active=company",
        //   baseOn: {
        //     name: "isCompany",
        //     value: false,
        //     message: this.$notCompanyTips,
        //   },
        //   label: "招兵买马，当老板",
        // },
        {
          name: "设置",
          icon: "icon4",
          url: "/pagesSub/public/setUp/index",
        },
      ],
      showEntry: false, // 招聘资料入口
      sharePath: "/pages/userCenter/index",
      isLogin: false,
    };
  },
  onShow() {
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    if (this.personId && !this.isLogin) {
      this.refreshInfo();
      this.isLogin = true;
    } else {
      this.refreshInfo();
      this.isLogin = false;
    }
  },
  created() {
    if (!this.personId) return;
    this.refreshInfo();
    getApp().watch((val) => {
      this.kingKongList[0].cnt = val;
    }, "meCount");
    this.isLogin = true;
    this.getConsultantNoticeCountFn();
  },

  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
  methods: {
    handleCheckDetail() {
      uni.showToast({ icon: "none", title: "功能等待开放", duration: 2000 });
    },
    refreshInfo() {
      const loginStatus = getApp().globalData.loginStatus;
      const tabBarList =
        loginStatus === "consultant"
          ? getApp().globalData.consultantTabs
          : loginStatus === "company"
          ? getApp().globalData.companyTabs
          : getApp().globalData.personTabs;
      getApp().globalData.tabBarList = tabBarList;
      this.ztConsultantInfoFn();
      this.getCompanyPersonInfo();
    },
    // 跳转内嵌H5
    handleEntry() {
      uni.navigateTo({
        url: "/pagesSub/userCenter/hrList/index",
      });
    },
    ztConsultantInfoFn() {
      const params = {
        personId: this.personId,
      };
      ztConsultantInfo(params).then((res) => {
        if (res.code == 200) {
          this.userInfo = res.data;
          if (this.userInfo.iname) {
            uni.setStorageSync("personName", this.userInfo.iname);
          }
        }
      });
    },
    getCompanyPersonInfo() {
      let params = {
        person_id: this.personId,
      };
      isCompanyPerson(params).then((res) => {
        if (res && res.code == 200) {
          uni.setStorageSync("company-id", res.info.company_id);
          this.setOptionList();
        } else {
          params = {
            personId: this.personId,
          };
          isCompanyPersonOld(params).then((oldRes) => {
            if (oldRes && oldRes.code == 200) {
              uni.setStorageSync("company-id", oldRes.company_id);
              this.setOptionList();
            } else {
              uni.removeStorageSync("company-id");
            }
          });
        }
      });
    },
    setOptionList() {
      this.isCompany = true;
    },

    jumpToMP() {
      uni.showModal({
        title: "温馨提示",
        content: '您好，请前往"一览通官方号"小程序使用一览通企业权益！',
        success: function (res) {
          if (res.confirm) {
            uni.navigateToMiniProgram({
              appId: "wx384a7e29f79f2fb6",
              path: "pages/index/index",
              success(res) {},
              fail(err) {},
            });
          } else if (res.cancel) {
          }
        },
      });
    },

    handleRoute(item) {
      if (item.name == "我要招聘") {
        this.jumpToMP();
        return;
      }

      if (item.url == "/pagesSub/public/character/index") {
        let linkFcn = item.isTab ? uni.switchTab : uni.navigateTo;
        linkFcn({
          url: item.url,
        });
        return;
      }
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      let linkFcn = item.isTab ? uni.switchTab : uni.navigateTo;
      linkFcn({
        url: item.url,
      });
    },
    handleLogOut() {
      this.loginOut(null, () => {
        this.personId = "";
      });
    },
    handleEdit() {
      uni.navigateTo({
        url: "/pagesSub/resume/basic/index",
      });
    },
    toResume() {
      if (this.isConsultant) return;
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      uni.navigateTo({
        url: "/pagesSub/newResume/index",
      });
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      if (this.personId && !this.isLogin) {
        this.refreshInfo();
        this.isLogin = true;
        getApp().watch((val) => {
          this.kingKongList[0].cnt = val;
        }, "meCount");
      }
    },
    async getConsultantNoticeCountFn() {
      const params = {
        consultantId: uni.getStorageSync("person-id").slice(2),
      };
      const res = await getConsultantNoticeCount(params);
      if (res.code == 200) {
        this.remindNumber = res.data[0].countNum;
        this.remindContent = res.data[0].cnType == 10 ? "有新订单" : "有新反馈";
      }
    },
  },
};
</script>

<style lang="scss">
$img-base-person: $img-base + "pcenter/";
@include img-base-self(".person-top", "pcenter/bg.png?v=1");
.user-center {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.person-top {
  height: 100rpx;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  border-radius: 0 0 68rpx 68rpx;
}
.person-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: -92rpx 32rpx 32rpx 32rpx;
  padding: 32rpx;
  border-radius: 20rpx;
  background-color: $uni-bg-color;
  overflow: hidden;
  color: $uni-text-color-333;
  .login-header {
    flex-shrink: 0;

    .name {
      font-weight: bold;
      font-size: $uni-font-size-max;
      letter-spacing: 4rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
    }
    .icon-edit {
      margin-left: 14rpx;
      width: 48rpx;
      height: 48rpx;
      background-image: url($img-base-person + "edit.png");
      vertical-align: sub;
    }
    .edit-resume {
      color: $u-type-primary;
      font-size: 24rpx;
      font-weight: 400;
      margin-top: 13rpx;
      margin-left: 18rpx;
      display: inline-block;
      vertical-align: text-top;
    }
    .tag {
      color: $uni-text-color-333;
      font-size: $uni-font-size-base;
    }
    .divider {
      display: inline-block;
      width: 1px;
      height: 24rpx;
      vertical-align: middle;
      background-color: $uni-text-color-999;
      margin: 0 12rpx;
    }
  }
  .need-login {
    padding-left: 20rpx;
    font-size: 40rpx;
    line-height: 132rpx;
  }
  .avatar-wrap {
    display: inline-block;
    margin-right: 32rpx;
    padding: 6rpx;
    border-radius: 50%;
    background: linear-gradient(
      135deg,
      rgba(255, 212, 128, 1),
      rgba(255, 95, 55, 1)
    );

    .avatar {
      display: block;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      // border: 6rpx solid #fff;
    }
  }
}
.king-kong {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin: 0 $uni-spacing-col-big $uni-spacing-col-big;
  padding: $uni-spacing-col-big;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-333;
  border-radius: 20rpx;
  background-color: $uni-bg-color;
  position: relative;
  &-item {
    position: relative;
  }
  .icon {
    width: 90rpx;
    height: 90rpx;
    margin-bottom: 12rpx;
  }
  .one-new-remind {
    width: 138rpx;
    height: 36rpx;
    background: #f75a3e;
    border-radius: 18rpx;
    position: absolute;
    // left: 27%;
    left: 38%;
    top: 0;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #ffffff;
  }
  .triangle {
    // width: 14rpx;
    // height: 6rpx;
    // background: #f75a3e;
    position: absolute;
    top: 36rpx;
    // left: 33%;
    left: 44%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #f75a3e;
  }
}
.list {
  flex: 1;
  margin: 0 32rpx;
  &-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 88rpx;
    line-height: 88rpx;
    padding: 0 32rpx;
    background-color: $uni-bg-color;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    &_label {
      margin-right: 18rpx;
      font-size: $uni-font-size-sm;
      color: $u-type-primary;
    }
  }
}
.log-out {
  flex-shrink: 0;
  margin: 66rpx 32rpx 64rpx;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 20rpx;
  background-color: #e9ecef;
  text-align: center;
  color: #555555;
  font-size: $uni-font-size-lg;
  font-weight: 500;
}
.user-center .item-icon {
  display: inline-block;
  vertical-align: text-top;
  background: url($img-base-person + "notify.png") no-repeat center / 100% 100%;
  width: 44rpx;
  height: 44rpx;
  margin-right: 24rpx;
  &.icon1 {
    background: url($img-base-person + "focus-on.png") no-repeat center / 100%
      100%;
  }
  &.icon2 {
    background: url($img-base-person + "outgoing.png") no-repeat center / 100%
      100%;
  }
  &.icon3 {
    background: url($img-base-person + "recruitment.png") no-repeat center /
      100% 100%;
  }
  &.icon4 {
    background: url($img-base-person + "set-up.png") no-repeat center / 100%
      100%;
  }
  &.icon5 {
    background: url("https://upload.yl1001.com/upload/images/view?file=gW3SNZV-W5LLYfYEZdXr8mBIa7tD9Juaa0AhknCjW5bdX/BK/PkPVTXJPt/7G.png")
      no-repeat center / 100% 100%;
  }
  &.icon6 {
    background: url("https://upload.yl1001.com/upload/images/view?file=7twCK70N2VQsIl2YTQ5gTZuEiiXXhEZBugid2BbAhV_t,Oc2cbkXsHRC,f0FT.png")
      no-repeat center / 100% 100%;
  }
  &.iconhr {
    background: url($img-base-person + "hr.png") no-repeat center / 100% 100%;
  }
  &.icon-order {
    width: 40rpx;
    height: 40rpx;
    background: url($img-base-person + "order.png") no-repeat center / 100% 100%;
  }
}
.renzheng {
  display: flex;
  align-items: center;
}
.renzhengImage {
  height: 44rpx;
  width: 106rpx;
  margin-left: 5rpx;
}
.flag {
  width: 50rpx;
  height: 50rpx;
  margin-left: 8rpx;
}
</style>
